import React, { useRef, useState } from 'react';
import ReactDOM from 'react-dom';

// hooks  专门对 函数式组件做的加强 不能用在类组件中
// 函数式组件每一次更新都会形成一个独立的闭包作用域
// useState的初始化 只会执行一次
//  useState 实现了 类似于 类组件的 setState
//  useRef  实现了 类似于 类组件的 ref
//  调用 setXXX的时候 就是一个顶替的过程 不会合并 需要自己合并

function App() {
  let [state, setState] = useState({
    count: 100,
    name: '珠峰'
  })
  function add() {
    setState({
      // 直接顶替 不会合并
      ...state,
      count: state.count + 1
    })
  }
  let { count, name } = state;
  return <>
    <h2>数字是{count}---{name}</h2>
    <button onClick={add}>+</button>
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))